<div class="metadata-tree">
  <div class="row">
    <p class="col-md-11">
      <span ng-bind="::ctrl.text.help"></span>
    </p>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="row">
            <div class="col-md-6 v-align">
              <strong>
                <span ng-bind="::ctrl.text.available"></span>
              </strong>
            </div>
            <div class="col-md-6">
              <div class="has-feedback">
                <input class="form-control input-sm"
                       type="text" placeholder="{$ ::ctrl.text.filter $}"
                       ng-model="ctrl.filterText.available"/>
                <span class="fa fa-search form-control-feedback"></span>
              </div>
            </div>
          </div>
        </div>
        <ul class="list-group metadata-list-group" ng-cloak>
          <li class="list-group-item" ng-form="customItemForm">
            <div class="input-group input-group-sm"
                 ng-class="{'has-error': customItemForm.$invalid && customItemForm.$dirty}">
              <span class="input-group-addon" ng-bind="::ctrl.text.custom"></span>
              <input class="form-control" type="text" name="customItem"
                     ng-model="ctrl.customItem"
                     validate-unique="ctrl.checkNameUnique"/>
              <span class="input-group-btn">
                <button type='button' class="btn btn-primary"
                   ng-click="ctrl.tree.addCustom(ctrl.customItem); ctrl.customItem=''"
                   ng-disabled="!ctrl.customItem || customItemForm.$invalid">
                  <span class="fa fa-plus"></span>
                </button>
              </span>
            </div>
            <div class="label label-danger"
                 ng-if="customItemForm.$invalid && customItemForm.$dirty">
              <span ng-bind="::ctrl.text.duplicate"></span>
            </div>
          </li>

          <li ng-repeat="item in availableList = (ctrl.tree.flatTree | filter: ctrl.availableFilter | filter: ctrl.quickFilter)"
              ng-class="'level-' + item.level + (ctrl.tree.selected===item?' active':'')"
              ng-class-odd="'dark-stripe'"
              ng-class-even="'light-stripe'"
              class="list-group-item"
              ng-click="ctrl.tree.select(item)">
            <div class="clearfix">
              <div class="pull-left">
              <span ng-class="{leaf: item.leaf}">
                <span class="fa" ng-show="!item.leaf"
                      ng-class="item.expanded ? 'fa-chevron-down' : 'fa-chevron-right'"></span>
                <span ng-bind="::item.label"></span>
              </span>
              </div>
              <div class="pull-right">
                <a class="btn btn-primary btn-xs"
                   ng-click="ctrl.tree.markAsAdded(item)">
                  <span class="fa fa-plus"></span>
                </a>
              </div>
            </div>
          </li>
          <li class="list-group-item disabled"
              ng-show="availableList.length===0">
            <span ng-bind="::ctrl.text.noAvailable"></span>
          </li>
        </ul>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="row">
            <div class="col-md-6 v-align">
              <strong>
                <span ng-bind="::ctrl.text.existing"></span>
              </strong>
            </div>
            <div class="col-md-6">
              <div class="has-feedback">
                <input class="form-control input-sm"
                       type="text" placeholder="{$ ::ctrl.text.filter $}"
                       ng-model="ctrl.filterText.existing"/>
                <span class="fa fa-search form-control-feedback"></span>
              </div>
            </div>
          </div>
        </div>
        <ul class="list-group metadata-list-group" ng-form="ctrl.metadataForm" ng-cloak>
          <li ng-repeat="item in existingList = (ctrl.tree.flatTree | filter:{added:true, leaf:'!false'} | orderBy:'leaf.name')"
	      ng-show="(ctrl.tree.flatTree | filter:{$:ctrl.filterText.existing}).indexOf(item) >= 0"
              ng-class="{'active': ctrl.tree.selected===item}"
              ng-class-odd="'dark-stripe'"
              ng-class-even="'light-stripe'"
              class="list-group-item"
              ng-click="ctrl.tree.select(item)">
            <metadata-tree-item item="item" text="ctrl.text"
                                   action="ctrl.tree.unmarkAsAdded(item)">
            </metadata-tree-item>
          </li>
          <li class="list-group-item disabled"
              ng-show="existingList.length===0">
            <span ng-bind="::ctrl.text.noExisting"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="well">
    <div ng-show="ctrl.tree.selected">
      <p>
        <strong>
          <span ng-bind="ctrl.tree.selected.label" class="word-wrap"></span>
        </strong>
        <span ng-show="ctrl.tree.selected.leaf" class="word-wrap">(<em><span ng-bind="ctrl.tree.selected.leaf.name"></span></em>)</span>
      </p>

      <p><span ng-bind="ctrl.tree.selected.description"></span></p>
    </div>
    <div ng-hide="ctrl.tree.selected">
      <span ng-bind="::ctrl.text.item_help"></span>
    </div>
  </div>
</div>
